<html>
    <head></head>
        <link rel="stylesheet" type="text/css" href="/static/ext-all.css"/>
        <style type="text/css" title="main" media="screen"> 
            #toolbar2 {background-color:#00ffff; border:1px solid #B8B8B8; ;}
            #listbox {background-color:#00eeef; border:1px solid #B8B8B8; ;}
        </style>
        <script type="text/javascript" src="/static/jquery.js"></script>
        <script type="text/javascript" src="/static/ext-jquery-adapter.js"></script> 
        <script type="text/javascript" src="/static/ext-all.js"></script> 

        <script type="text/javascript">
        
            var project_uid = '{{ project_uid }}';
        
		    $(document).ready(function(){
		        console.log('jquery init');
		
		    });
		    
		    Ext.onReady(function(){
		 
		 
		 var tb = new Ext.Toolbar({
		    items: [
		        {
		            // xtype: 'button', // default for Toolbars, same as 'tbbutton'
		            text: 'Add'
		        },
                {
                    // xtype: 'button', // default for Toolbars, same as 'tbbutton'
                    text: 'Del'
                },

		    ]
		});
		 
		 
        
 
        
        
	    var tree_panel = new Ext.tree.TreePanel({
	        useArrows: true,
	        autoScroll: true,
	        animate: true,
	        enableDD: true,
	        containerScroll: true,
	        border: false,
	        //tbar: tb,
	        tools:[{
			    id:'plus',
			    qtip: 'Refresh form Data',
			    // hidden:true,
			    handler: function(event, toolEl, panel){
			        // refresh logic
			    }
			}],
	        width: '100%',
	        // auto create TreeLoader
	        dataUrl: '/{{project_name}}/tree/get/',
	        rootVisible: false,
	        listeners: {
                click: function(n) {
                    $('iframe#editor').attr('src', '/pages/editor/' + n.attributes.id + '/');
                }
            },
            
	        root: {
	            nodeType: 'async',
	            text: 'rootNode',
	            draggable: false,
	            id: ''
	        }
	    }); 
	    
        var tree_editor = new Ext.tree.TreeEditor(
            tree_panel, 
            new Ext.form.TextField({allowBlank:false, blankText:'A name is required',}),
            {
                selectOnFocus:true,
                listeners:{
                    beforecomplete: function( editor, value, startValue ){},
                }
            }
        );   
		 
		       // NOTE: This is an example showing simple state management. During development,
		       // it is generally best to disable state management as dynamically-generated ids
		       // can change across page loads, leading to unpredictable results.  The developer
		       // should ensure that stable state ids are set for stateful components in real apps.
		       Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
		 
		       var viewport = new Ext.Viewport({
		            layout:'border',
		            items:[{
		                region:'west',
		                id:'west-panel',
		                title:'Project Navigation',
		                xtype: 'panel',
		                split:true,
		                width: 200,
		                minSize: 175,
		                maxSize: 400,
		                collapsible: true,
		                margins:'35 0 5 5',
		                cmargins:'35 5 5 5',
		                layout:'column',
		                layoutConfig:{
		                    animate:true
		                },
		                items: [
						    tree_panel,
		                ]
		            },{
		                region:'center',
		                margins:'35 5 5 0',
		                layout:'column',
		                autoScroll:false,
		                items: [

		                {
						    title:'Editor',
						    id: 'editor',
						    xtype: 'box',
						    width: '100%',
						    height: '100%',
						    autoScroll:false,
						    autoEl: {
						        tag: 'iframe',
						        src: '/{{project_name}}/status/'
						    }
						},
		
		                ]
		            }]
		        });
		        

		    });
		    
		    
		    
        </script>
    <body>
    
    
        
    </body>
</html>